<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-18 09:22:10
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-21 15:51:56
 * @FilePath: \appGly\pages\Station\components\ChargeCaritem.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
	<view class="stationitemcontent" @click="$z.gopage(`/pages/ChargeCar/ChargeCarEdt?gtel=${item.gtel}`)">
		<view class="u-flex title">
			<view class="iconfont iconicon-chongdianzhuang sbicon"></view>
			<view class="u-line-1">{{ item.mc }}</view>
			<view style="width: 8rpx"></view>
			<u-tag size="mini" shape="circle" type="primary" :text="$z.$t(`使用率${item['syl']}%`)"></u-tag>
		</view>
		<view class="zsb">
			{{ $z.$t(`地址`) }}
			：{{ item.dz }}
		</view>
		<view class="mui-ellipsis" style="font-size: 28rpx">
			<!-- <span
        ng-bind="sbgztfn(p)['mc']"
        ng-style="{color:sbgztfn(p)['color']}"
      ></span> -->
			<text :style="[{ color: showdata.gzt.color }]">
				{{ showdata.gzt.mc }}
			</text>
			<text class="iconfont icontubiaozhizuo-"></text>
			<text style="color: #73c454">
				{{ showdata["gztkx"] }} {{ $z.$t("路空闲") }}
			</text>
			<text class="iconfont icontubiaozhizuo-"></text>
			<text style="color: #f38782">
				{{ showdata["gztzy"] }} {{ $z.$t("路使用中") }}
			</text>
		</view>
		<view class="rightIcon">
			<u-icon name="arrow-right" size="24" color="#969696"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},
		computed: {
			showdata() {
				let gzt = [{
						zhi: 0,
						mc: this.$z.$t("离线"),
						color: "#969696"
					},
					{
						zhi: 1,
						mc: this.$z.$t("在线"),
						color: "#2093f5"
					},
					{
						zhi: 2,
						mc: this.$z.$t("断电"),
						color: "#ffa1a7",
					},
					{
						zhi: 9,
						mc: this.$z.$t("未上线"),
						color: "#969696"
					},
				];
				let dqgzt = gzt.find((e) => {
					return e["zhi"] == this.item["gzt"];
				});
				if (!dqgzt) {
					dqgzt = gzt[3];
				}
				var r = 0;
				for (var i = 1; i <= this.item["gls"]; i++) {
					if (this.item["glzt" + i] != 1) {
						r++;
					}
				}
				var z = this.item["gls"] - r;

				return {
					gzt: dqgzt,
					gztkx: r,
					gztzy: z,
				};
			},
		},
		data() {
			return {};
		},
	};
</script>

<style lang="scss" scoped>
	.stationitemcontent {
		background: #fff;
		padding: 22rpx 30rpx;
		position: relative;

		.rightIcon {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.title {
			font-size: 34rpx;

			.iconfont {
				width: 60rpx;
				height: 60rpx;
				font-size: 40rpx;
				margin-right: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.zsb {
			font-size: 24rpx;
			line-height: 60rpx;
			color: #8f8f94;

			.dl {
				margin-left: 10px;
				color: #92ceff;
			}
		}
	}

	.zxChargeCar {
		font-size: 14px;
		color: #92ceff;
		margin-right: 5px;
	}

	.lxChargeCar {
		font-size: 14px;
		color: #969696;
		margin: 0 5px;
	}

	.cdzChargeCar {
		font-size: 14px;
		color: #ffa1a7;
		margin: 0 5px;
	}

	.kxChargeCar {
		font-size: 14px;
		color: #9affad;
		margin: 0 5px;
	}

	.shu {
		font-size: 16px;
		/*vertical-align: top;*/
		height: 14px;
		/* display: inline-block; */
	}
</style>